<template>
  <div class="app-container">
    <div class="post">
      <h2> {{dreamForm.title}} </h2>
      <div class="timestamp">
        <span class="description"> dreamt on: {{dreamForm.dream_date}} </span>
        <el-tag :type="dreamForm.is_private==true?'danger':'info'">
              {{ isPrivate }}
        </el-tag>
      </div>
    </div>
    <div class="underline">
      <el-tag type="info" v-for="(ele, index) in dreamForm.tags"
              :key="ele.key" :value="ele.value">
              {{ ele.value }}
      </el-tag>
      <div class="main-story" v-html="dreamForm.content"></div>
      <div class="action">
        <router-link :to="'/nightmares/edit_dream/'+dreamForm._id">
          <el-button type="primary"> <i class="el-icon-edit" /> Edit </el-button>
        </router-link>
        <el-button type="danger" @click="deleteDream"> <i class="el-icon-delete" /> Delete </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getDreamById, deleteDreamById } from '@/api/dreams'
export default {
  name: 'ReadDream',

  data() {
    return {
      isRead: true,
      dreamLoading: true,
      dreamForm: {},
      isPrivate: ''
    }
  },
  created() {
    if (this.isRead) {
      const id = this.$route.params && this.$route.params.id
      this.fetchData(id)
    }
  },
  methods: {
    fetchData(id) {
      this.dreamLoading = true
      getDreamById(id).then(response => {
        console.log('read dream page get data: ')
        console.log(response)
        if (response.data) {
          this.dreamForm = response.data
          if (this.dreamForm.is_private) {
            this.isPrivate = 'private'
          } else {
            this.isPrivate = 'open'
          }
        }
        this.dreamLoading = false
      })
    },
    deleteDream() {
      const id = this.$route.params && this.$route.params.id
      const data = { '_id' : id }
      deleteDreamById(data).then(response => {
        if (response.code === 20000){
          this.$router.push({ name: "Dreams" })
        }
      })
    }
  }

}

</script>

<style lang="scss" scoped>
.app-container {
  margin-left: 2%;
  .timestamp {
    .el-tag {
      height: 20px;
      line-height: 20px;
      font-weight: 1000;
      border-radius: 9px;
    }
    .description {
      margin-left: 50px;
      margin-right: 50px;
      padding: 2px 0;
    }
    span {
      font-weight: 500;
      font-size: 12px;
    }
  }
  .post {
    font-size: 14px;
    border-bottom: 1px solid #d2d6de;
    margin-bottom: 15px;
    padding-bottom: 15px;
    color: #666;
  }
  .underline {
    .el-tag {
      margin-right: 10px;
      height: 30px;
      background-color: #2d2d31;
      border-color: #5a5a5f;
      color: #fbfcff;
    }
    .main-story {
      color: #8a8a8a;
      font-family: -webkit-pictograph;
      font-size: larger;
    }
    .action {
      position:fixed;
      bottom:20px;
      z-index:99999;
    }
  }
}
</style>
